<template>
  <div>
    <h1>我是登录</h1>
    <!-- 作用：实现切换页面，相当于a标签 -->
    <!-- to的使用 直接使用path /home-->
    <!-- to="/home " to="{name:'home'}" -->
    <!-- 写法 :to="{name:'home'}" 记得使用v-bind绑定· -->
    <!-- query:{
        id:19
    } -->
    <!-- params:{id:123,title:'zy'} -->
    <!-- name和path -->
    <router-link active-class="active" :to="{name:'home',}">登录</router-link>
    <button @click="loginBtn()">登录</button>
</div>
</template>
<script>
export default {
    //导航跳转方式
    // 声明式导航 router-link 
    // 编程式导航 ----在js中跳转
    //  this.$router.push("/home")
    name:"LoginUser",
    methods:{
        loginBtn(){
            console.log(this.$router);
            this.$router.push("/home")
        }
    }
}
</script>

<style scoped>
    /* 点击的样式 */
    .active{
        font-size: 50px;
        text-decoration: none;
        color:pink;
    }
</style>